<!--  -->
<template>
  <div class style="background: #fff; overflow: hidden">
    <!-- <router-view></router-view> -->
    <!-- 顶部 -->
    <div class="topbg">
      <div class="top">
        <div class="avatar">
          <van-image
            @click="avatarSkip"
            class="avatarSty"
            round
            :src="data.avatar"
          />
          <div style="padding-left: 6px">
            <p style="display: flex; align-items: center">
              <span class="username">{{
                data.nick_name || "你还未设置昵称"
              }}</span>
              <span class="levelBg"
                ><span style="padding: 0 0 2px 10px">{{
                  data.vip_name
                }}</span></span
              >
            </p>
            <p class="score" style="">
              <span style="color: #c4c4c4">
                积分：
                <span style="color: #c4c4c4">{{ parseInt(data.credit) }}</span>
              </span>
            </p>
          </div>
        </div>
        <div class="infos">
          <!-- <van-icon v-if="" name="chat-o" :badge="msg_num" color="#fff" size="20" /> -->
          <van-icon
          @click="infoSkip"
            name="chat-o"
            :badge="msg_num > 9 ? '9+' : msg_num"
            color="#fff"
            size="20"
          />
        </div>
      </div>
    </div>

    <!-- 内容 -->
    <div class="moneycenter">
      <div class="moneybox" style="">
        <div style="font-size: 12px">金额(元)</div>
        <div class="money">
          <span class="num">
            <span style="font-size: 20px; color: #434050; padding-right: 4px"
              >¥</span
            >
            {{ data.money }}</span
          >

          <van-button class="btn_charge" @click.native="charge" round
            >充值</van-button
          >
        </div>
        <div class="disf disf_jc">
          <div class="rate_money">
            <p style="font-size: 12px">代收利息(元)</p>
            <p style="color: #434050">
              <span>¥</span>
              <span style="font-size: 20px; font-weight: 700">{{
                data.ds_apr_money
              }}</span>
            </p>
          </div>
          <div class="ori_money">
            <p style="font-size: 12px">代收本金(元)</p>
            <p style="color: #434050">
              <span>¥</span
              ><span style="font-size: 20px; font-weight: 700">{{
                data.ds_money
              }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮 -->
    <div class="btn_group">
      <van-button class="cash_in" round @click.native="cashout"
        >提现</van-button
      >
      <van-button class="cash_out" round @click.native="carryover"
        >转账</van-button
      >
    </div>
    <div class="line"></div>
    <!-- 其他 -->
    <div class="other clearfix">
      <h3 class="otherH3" style="">其他</h3>
      <div class="disf" style="margin-top: 30px">
        <p class="cloum" @click="safeSkip">
          <img
            class="icon_other"
            src="../../assets/vip/safe.png"
            alt=""
          />安全中心
        </p>
        <p class="cloum" @click="invitedSkip">
          <img
            class="icon_other"
            src="../../assets/vip/gift.png"
            alt=""
          />邀请好友
        </p>
        <p class="cloum" @click="safeSkip">
          <img
            class="icon_other"
            src="../../assets/vip/note.png"
            alt=""
          />用户协议
        </p>
        <p class="cloum" @click="safeSkip">
          <img
            class="icon_other"
            src="../../assets/vip/lock.png"
            alt=""
          />隐私协议
        </p>
      </div>
      <div class="disf" style="margin-top: 30px">
        <!-- <p class="cloum" @click="banklist">
          <img
            class="icon_other"
            src="../../assets/vip/lock.png"
            alt=""
          />银行卡
        </p> -->
        <p class="cloum" @click="capitaldetails">
          <img
            class="icon_other"
            src="../../assets/vip/lock.png"
            alt=""
          />资金明细
        </p>
        <p class="cloum"></p>
        <p class="cloum"></p>
        <p class="cloum"></p>
        <!-- <p class="cloum"></p> -->
      </div>
    </div>
    <!-- 商标 -->
    <div class="copy_right">
      <div class="disf" style="font-size: 16px">
        <img
          class="copy_righimgtSty"
          style=""
          src="../../assets/vip/brand.png"
          alt=""
        />源聚通
      </div>
      <div style="font-size: 11px; margin-top: 5px">版本V4.1.2</div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Fetch from "../../utils/fetch";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "vip",
  },
  data() {
    //这里存放数据
    return {
      data: {},
      item_code: [],
      loading: false,
      msg_num: 0,
      config: {
        user_contract_link: "/",
        user_contract_ys_link: "/",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    avatarSkip() {
      this.$router.push({ path: "/setup" });
    },

    safeSkip() {
      this.$router.push({ path: "/safeCenter" });
    },
    infoSkip(){
      this.$router.push({ path: "/notice" });
    },
    invitedSkip() {
      this.$router.push({ path: "/invited" });
    },
    banklist() {
      this.$router.push({ path: "/banklist" });
    },
    capitaldetails() {
      this.$router.push({ path: "/capitaldetails" });
    },
    start() {
      Fetch("/user/info/index").then((res) => {
        this.data = res.data;
      });
      Fetch("/api/api/webconfig", { type: "web" }).then((res) => {
        this.config = res.data;
      });
      var that = this;
      Fetch("/article/about/search").then((res) => {
        that.item_code = res.data.list;
        that.loading = true;
      });
      Fetch("/user/noticeread/search").then((res) => {
        var msg_arr = 0;
        res.data.list.forEach(function (k, v) {
          if (!k.is_read) {
            msg_arr += 1;
          }
        });

        this.msg_num = msg_arr;
        if (msg_arr > 9) {
          this.msg_num = "9+";
        }
      });
    },
    charge() {
      this.$router.push({
        path: "charge",
      });
    },
    cashout() {
      this.$router.push({
        path: "cashout",
      });
    },
    carryover() {
      this.$router.push({
        path: "carryover",
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.start();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
/* //@import url(); 引入公共css类 */

.topbg {
  background: url("../../assets/vip/bgblack.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 193px;
}
.top {
  display: flex;
  justify-content: space-between;
  padding: 15px 15px;
  align-items: center;
}
.avatar {
  display: flex;
  align-items: center;
}
.avatarSty {
  width: 40px;
  height: 40px;
}
.moneybox {
  padding: 20px 16px;
}
.username {
  font-weight: 600;
  color: #ffffff;
  font-size: 14px;
}
.score {
  font-size: 11px;
  color: #ffffff;
}
.levelBg {
  width: 65px;
  height: 20px;
  background: url("../..//assets/vip/leval.png") no-repeat;
  /* background: #eee; */
  background-size: 100% 100%;
  color: #414b78;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
}
.moneycenter {
  width: 94%;
  height: 176px;
  /* background: url("../../assets/vip/vipbg.png") no-repeat; */
  background: url("../../assets/vip/yellow.png") no-repeat;

  background-size: 100% 100%;
  margin: auto;
  color: #92764d;
  margin-top: -120px;
  /* padding-top: 8px; */
}
.money {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.disf_jc{
  margin: 10px 0;
}
.num {
  font-size: 38px;
  color: #434050;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.btn_charge {
  width: 87px;
  height: 36px;
  color: #434050;
  font-size: 20px;
}
.btn_group {
  display: flex;
  justify-content: space-around;
  padding: 15px;
}
.cash_in,
.cash_out {
  width: 165px;
  height: 39px;
}
.cash_in {
  color: #3f3f3f;
  border: 1px solid #3f3f3f;
}
.cash_out {
  color: #ff4b36;
  border: 1px solid #ff4b36;
}
.cash_out {
  color: #92764d;
  border: 1px solid #92764d;
}
.other {
  width: 100%;
  /* height: 193px; */
  border: 1px solid #eee;
}
.icon_other {
  width: 20px;
  height: 23px;
}
.otherH3 {
  line-height: 50px;
  padding-left: 15px;
}
.icon_other {
  width: 20px;
  height: 23px;
}
.cloum {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  color: #717171;
  font-size: 12px;
  line-height: 36px;
}
.copy_right {
  color: #e0e0e0;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f7f8f9;
  padding: 10px 0;
  /* position: absolute;
    bottom: 60px;
    left: 50%;
    margin-left: -50px;
    width: 100px; */
}
.copy_righimgtSty {
  width: 24px;
  height: 24px;
}
</style>